<template>
  <div id="downloadCenterOrg" class="container">
    <div class="content">
      <!-- 采用v-for显示目录名 -->
      <div class="title">
        <span
          class="title_item"
          v-for="item in resourceTabList"
          :key="item.resourceId"
          @click="clickTab(item)"
        >{{item.name}} ></span>
      </div>
      <div class="panel">
        <div class="condition">
          <div class="row_one">
            <el-input
              style="width: 3.5rem;"
              placeholder="搜索 目录名称/文件名称"
              v-model="param.name"
              class="input_search"
              clearable
            ></el-input>
            <div
              class="search_btn"
              style="margin-left:0.1rem;"
              @click="searchFile()"
              v-if="hasApi('downResourceList')"
            >搜索</div>
            <div v-if="hasApi('folderAdd')" class="right_btn" @click="openFolderAdd()">新建目录</div>
            <!-- 当前页面不是根目录的情况下才能上传文件  && hasApi('downResourceAdd')-->
            <div
              v-if="param.parentId != 0 "
              class="upload_btn"
              @click="openUpload"
            >上传文件</div>
            <!-- 需选择文件后才能下载文件 -->
            <div
              v-if="param.parentId != 0 && downloadList.length >0 && hasApi('getResourcePath')"
              class="download_btn"
              @click="openDownload"
            >下载文件</div>
          </div>
        </div>

        <div>
          <table class="table" cellspacing="0">
            <thead class="thead">
              <tr>
                <td style="width: 6rem;">目录名称/文件名称</td>
                <td style="width: 4rem;">资源类型</td>
                <td style="width: 4rem;">修改时间</td>
                <td style="width: 4rem;">修改人员</td>
                <td style="width: 2rem;">操作</td>
              </tr>
            </thead>
            <tbody class="tbody">
              <tr v-for="item,index in resourceList">
                <td v-if="item.isEdit" style="text-align: left;padding-left:0.5rem;">
                  <div
                    style="display: flex;justify-content: left;align-items: left;"
                    v-if="item.type==1"
                  >
                    <div class="name_img_blend"></div>
                    <el-input
                      placeholder="请输入目录名称"
                      v-model="item.name"
                      @blur.prevent="itemEdit(item)"
                      spellcheck="false"
                      style="width:50%;"
                      :id="item.id"
                    >
                      <i
                        slot="suffix"
                        class="el-input__icon el-icon-edit"
                        style="cursor: pointer;"
                        @click="itemEdit(item)"
                      ></i>
                    </el-input>
                  </div>
                  <div v-else>
                    <!-- 不能下载zip文件(暂) -->
                    <el-checkbox
                      v-if="item.fileType != '.zip'"
                      v-model="item.isCheck"
                      :disabled="item.isDownloadable == '0'"
                      @change="boxChange(item)"
                    ></el-checkbox>
                    <el-input
                      placeholder="请输入文件名称"
                      v-model="item.name"
                      @blur.prevent="itemEdit(item)"
                      spellcheck="false"
                      style="width:50%;"
                      :id="item.id"
                    >
                      <i
                        slot="suffix"
                        class="el-input__icon el-icon-edit"
                        style="cursor: pointer;"
                        @click="itemEdit(item)"
                      ></i>
                    </el-input>
                  </div>
                </td>
                <td v-else style="text-align: left;padding-left:0.5rem;">
                  <div
                    style="display: flex;justify-content: left;align-items: left;"
                    v-if="item.type==1"
                  >
                    <div class="name_img_blend"></div>
                    <div style="cursor: pointer;">
                      <span @click="clickItem(item)">{{item.name}}</span>
                      <i
                        v-if="hasApi('folderUpdate')"
                        class="el-icon-edit nameEdit"
                        @click="openEdit(item)"
                      ></i>
                    </div>
                  </div>
                  <div v-else>
                    <el-checkbox
                      v-if="item.fileType != '.zip'"
                      v-model="item.isCheck"
                      :disabled="item.isDownloadable == '0'"
                      @change="boxChange(item)"
                    ></el-checkbox>
                    <span @click="clickItem(item)" style="cursor: pointer;">{{item.name}}</span>
                    <i
                      v-if="hasApi('downResourceUpdate')"
                      style="cursor: pointer;"
                      class="el-icon-edit nameEdit"
                      @click="openEdit(item)"
                    ></i>
                  </div>
                </td>
                <td>{{item.fileType}}</td>
                <td>{{item.createTime}}</td>
                <td>{{item.createUserName}}</td>
                <td>
                  <div class="edit_btn">
                    <div
                      class="btn_img_details"
                      v-if="item.type!=1 && hasApi('actionLogList')"
                      @click="resourceLook(item)"
                    ></div>
                    <div
                      v-if="hasApi('downResourceSort')"
                      :class="item.isFirst? 'btn_img_up_disable':'btn_img_up'"
                      @click="resourceMove(-1,item,index)"
                    ></div>
                    <div
                      v-if="hasApi('downResourceSort')"
                      :class="item.isLast? 'btn_img_down_disable':'btn_img_down'"
                      @click="resourceMove(1,item,index)"
                    ></div>
                    <!--删除文件夹-->
                    <template v-if="item.type==1">
                      <div
                        v-if="hasApi('folderDelete')"
                        class="btn_img_delete"
                        @click="folderDelete(item)"
                      ></div>
                    </template>
                    <!--删除文件-->
                    <template v-else>
                      <div
                        v-if="hasApi('downResourceDelete')"
                        class="btn_img_delete"
                        @click="fileDelete(item)"
                      ></div>
                    </template>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="pageSizeChange"
          @current-change="pageIndexChange"
          :total="count"
        ></el-pagination>
      </div>
    </div>
    <!-- 新建文件夹组件 -->
    <folderAdd ref="folderAdd" @callback="closeAdd"></folderAdd>
    <!-- 下载详情组件 -->
    <downloadDetails ref="downloadDetails"></downloadDetails>
    <!-- 上传文件组件 -->
    <uploadFile ref="uploadFile" @callback="closeUpload"></uploadFile>
    <!-- 下载文件组件 -->
    <downloadFile ref="downloadFile" @callback="cloasDownload"></downloadFile>
  </div>
</template>

<script>
let vm;
import folderAdd from "./common/folder_add";
import downloadDetails from "./common/download_details";
import uploadFile from "./common/upload_file";
import downloadFile from "./common/download_file";
export default {
  data() {
    return {
      resourceList: [], //资源列表
      param: {
        //当前筛选条件
        name: "",
        parentId: 0, //父目录ID
        pageSize: 10,
        currPage: 1,
        objectId: "",
        objectIdList: []
      },
      count: null, //当前总资源数
      downloadList: [], //要下载的资源列表
      bosResourceUrl: "", //当前页面的BOS资源URL
      resourceTabList: [
        {
          //资源路径列表
          name: "全部资源",
          resourceId: 0,
          bosResourceUrl: "resourcecenter/"
        }
      ]
    };
  },
  components: {
    folderAdd,
    downloadDetails,
    uploadFile,
    downloadFile
  },
  methods: {
    searchFile() {
      vm.param.currPage = 1;
      vm.search();
    },
    init() {
      vm.search();
    },
    /**查询资源列表 */
    search: function() {
      vm.downloadList = [];
      //				vm.resourceList = [];

      api.downResourceList(vm.param).then(function(result) {
        if(result.status == "success"){
          //第一条文件的序号
        var fIndex = null;
        var list = result.data.list;
        list.forEach(function(item, index) {
          item.isFirst = index == 0;
          item.isLast = index == list.length - 1;
          item.isEdit = false;
          item.isCheck = false;
          //文件类型
          if (item.type == 2) {
            let len = item.name.lastIndexOf(".");
            item.fileType = item.name.substring(len); //文件类型
            item.name = item.name.substring(0, len); //文件名
            fIndex = fIndex == null ? index : fIndex;
          } else {
            //文件夹类型
            item.fileType = "文件夹";
          }
        
        
        });
        //如果有第一条文件数据,并且不是在第一位,即当前是文件夹和文件都有
        if (fIndex != null && fIndex != 0) {
          list[fIndex].isFirst = true;
          list[fIndex - 1].isLast = true;
        }
        vm.count = result.data.totalCount;
        vm.resourceList = list;
        }else{
          vm.$message.error(result.data.result);
        }
      });
    },
    /**编辑名称 */
    openEdit: function(item) {
      item.isEdit = true;
      vm.$nextTick(() => {
        $("#" + item.id).focus();
      });
    },
    /**全选按钮change */
    boxChange(item) {
      if (item.isCheck) {
        vm.downloadList.push(item);
      } else {
        vm.downloadList.splice(vm.downloadList.indexOf(item), 1);
      }
    },
    /**获取bos资源url */
    getBosResourceUrl() {
      let bosResourceUrl = "";
      for (let i = 0; i < vm.resourceTabList.length; i++) {
        if (i == 0) {
          bosResourceUrl += "resourcecenter/";
        } else {
          bosResourceUrl += vm.resourceTabList[i].name + "/";
        }
      }
      return bosResourceUrl;
    },
    /**点击文件名 */
    clickItem(item) {
      if (item.type == 1) {
        vm.resourceTabList.push({
          name: item.name,
          resourceId: item.id,
          bosResourceUrl: vm.getBosResourceUrl()
        });
        vm.selectList(item.id, "", vm.getBosResourceUrl());
      } else {
        if (!vm.$store.state.permit["999"]) {
          tool.message({
            showClose: true,
            message: "当前用户缺少权限",
            type: "warning"
          });
          return;
        }
        var path = vm.$store.state.permit["999"].path;
        let routeData = this.$router.resolve({
          path: path,
          query: { resourceId: item.id,index:1 }
        });
        window.open(routeData.href);
      }
    },
    /**查询数据 */
    selectList(resourceId, resourceName, bosResourceUrl) {
      vm.param.parentId = resourceId;
      vm.param.currPage = 1;
      vm.param.name = resourceName;
      vm.param.pageSize = 10;
      vm.bosResourceUrl = bosResourceUrl;
      vm.search();
    },
    /**点击资源tab */
    clickTab(item) {
      let index = vm.resourceTabList.indexOf(item);
      vm.resourceTabList.splice(index + 1);
      vm.selectList(item.resourceId, "", item.bosResourceUrl);
    },
    /**查看详情 */
    resourceLook(item) {
      vm.$refs.downloadDetails.init(item);
    },
    folderDelete: function(item) {
      //删除文件夹
      tool
        .confirm("删除后,该目录下所有的资源将会被删除, 是否删除?", "删除提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          center: true
        })
        .then(() => {
          api.folderDelete({ id: item.id, type: 1 }).then(function(result) {
            tool.message({
              showClose: true,
              message: "删除成功",
              type: "success"
            });
            vm.search();
          });
        });
    },
    fileDelete: function(item) {
      //删除文件
      tool
        .confirm("删除后,校区则无法查看该资源, 是否删除?", "删除提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          center: true
        })
        .then(() => {
          api.downResourceDelete({ id: item.id }).then(function(result) {
            tool.message({
              showClose: true,
              message: "删除成功",
              type: "success"
            });
            vm.search();
          });
        });
    },
    /**@param dir 方向  1:往上 ,-1往下
     * @param one 资源对象
     * @param index 资源对象的位置
     */
    resourceMove(dir, one, index) {
      //如果是第一个并且往上走, 或者最后一个并且往下走, 不处理
      if ((one.isFirst && dir == -1) || (one.isLast && dir == 1)) {
        return;
      }
      var two = vm.resourceList[index + dir];
      //获取到one和two两个对象, 整合参数
      let param = {
        oneResourceId: one.id,
        oneOrderBy: two.sort,
        twoResourceId: two.id,
        twoOrderBy: one.sort,
        resourceType: one.type
      };
      api.downResourceSort(param).then(function(result) {
        vm.search();
      });
    },
    /*关闭下载文件 */
    cloasDownload() {},
    /**关闭新建目录 */
    closeAdd() {
      vm.search();
    },
    /**关闭上传文件 */
    closeUpload(data) {
      vm.search();
    },
    /**编辑名称 */
    itemEdit(item) {
      if (item.type == 1) {
        //修改文件夹
        api.folderUpdate(item).then(function() {
          item.isEdit = false;
          tool.message({
            message: "修改成功",
            type: "success",
            showClose: true
          });
          vm.search();
        });
      } else {
        //修改文件
        item.name = item.name + item.fileType;
        api.downResourceUpdate(item).then(function() {
          item.isEdit = false;
          tool.message({
            message: "修改成功",
            type: "success",
            showClose: true
          });
          vm.search();
        });
      }
    },
    openDownload() {
      let ids = [];
      for (let i = 0; i < vm.downloadList.length; i++) {
        ids.push(vm.downloadList[i].id);
      }
      api.getResourcePath({ resourceIds: ids }).then(function(result) {
        var data = result.data;
        for (let i = 0; i < data.list.length; i++) {
          for (let y = 0; y < vm.downloadList.length; y++) {
            if (data.list[i].resourceId == vm.downloadList[y].id) {
              vm.downloadList[y].downLoadPath = data.list[i].downLoadPath;
              if (!data.list[i].success) {
                vm.$message.error(data.list[i].errorMsg);
              }
              break;
            }
          }
        }
        vm.$refs.downloadFile.init(tool.clone(vm.downloadList));
      });
    },
    /**上传文件 */
    openUpload() {
      let paras = {
        bosResourceUrl: vm.bosResourceUrl,
        resourceParentId: vm.param.parentId
      };
      vm.$refs.uploadFile.init(paras);
    },
    /**
     * 新建目录
     */
    openFolderAdd() {
      vm.$refs.folderAdd.init(vm.param.parentId);
    },
    pageSizeChange: function(val) {
      vm.param.pageSize = val;
      vm.search();
    },
    /**表格显示形式翻页 */
    pageIndexChange: function(val) {
      vm.param.currPage = val;
      vm.search();
    }
  },
  created: function() {
    vm = this;

    var user = tool.getItem(lsKey.user, true);
    vm.param.objectId = user.orgId;
    //遍历校区,将校区id放到参数中
    user.campusList.forEach(function(campus) {
      vm.param.objectIdList.push(campus.campusId);
    });
  }
};
</script>

<style lang="scss">
#downloadCenterOrg {
  .el-checkbox {
    margin-right: 0.1rem;
  }
  .title_item {
    cursor: pointer;
  }
  .title_item:hover {
    color: #3885f8;
  }
  .name_img_blend {
    margin-right: 0.1rem;
    width: 0.2rem;
    height: 0.16rem;
    background-image: url(../../assets/img/internal_manage/file.png);
  }
  .el-input__inner {
    border-radius: 0.08rem;
    font-size: 0.16rem;
    color: #666666;
    height: 0.36rem;
    line-height: 0.36rem;
  }
  .el-input__icon {
    line-height: 0.36rem;
  }
  .input_search {
    .el-input__inner {
      background-color: rgb(247, 248, 250);
    }
  }
  .el-checkbox__inner {
    width: 0.18rem;
    height: 0.18rem;
  }
  .el-checkbox__inner::after {
    height: 0.09rem;
    left: 0.05rem;
    position: absolute;
    top: 0.01rem;
    width: 0.04rem;
  }
  .edit_btn {
    display: flex;
    justify-content: center;
    align-content: center;
    text-align: center;
    height: 0.26rem;
    line-height: 0.26rem;
    .btn_img_down {
      color: #3885f8;
      padding-left: 0.35rem;
      background-image: url("../../assets/img/internal_manage/down.png");
      background-repeat: no-repeat;
      background-size: 0.2rem;
      background-position: 0.1rem center;
      cursor: pointer;
    }
    .btn_img_down_disable {
      color: #3885f8;
      padding-left: 0.35rem;
      background-image: url("../../assets/img/internal_manage/down.png");
      background-repeat: no-repeat;
      background-size: 0.2rem;
      background-position: 0.1rem center;
      cursor: pointer;
      opacity: 0.4;
      filter: alpha(opacity=40);
      /* 针对 IE8 以及更早的版本 */
    }
    .btn_img_up_disable {
      color: #3885f8;
      padding-left: 0.35rem;
      background-image: url("../../assets/img/internal_manage/up.png");
      background-repeat: no-repeat;
      background-size: 0.2rem;
      background-position: 0.1rem center;
      opacity: 0.4;
      filter: alpha(opacity=40);
      /* 针对 IE8 以及更早的版本 */
      cursor: pointer;
    }
    .btn_img_up {
      color: #3885f8;
      padding-left: 0.35rem;
      background-image: url("../../assets/img/internal_manage/up.png");
      background-repeat: no-repeat;
      background-size: 0.2rem;
      background-position: 0.1rem center;
      cursor: pointer;
    }
    .btn_img_delete {
      color: #3885f8;
      padding-left: 0.28rem;
      background-image: url("../../assets/img/internal_manage/delete.png");
      background-repeat: no-repeat;
      background-size: 0.14rem;
      background-position: 0.09rem center;
      cursor: pointer;
    }
    .btn_img_details {
      color: #3885f8;
      padding-left: 0.35rem;
      background-image: url("../../assets/img/internal_manage/details.png");
      background-repeat: no-repeat;
      background-size: 0.2rem;
      background-position: 0.1rem center;
      cursor: pointer;
    }
  }
}
</style>
<style scoped src="@/style/module/table.css"></style>
<style scoped src="@/style/clue_manage/clue_manage.css"></style>
<style scoped>
.right_btn {
  background-image: url(../../assets/img/clue_manage/add_white.png);
  margin-left: 0.2rem;
}

.download_btn {
  width: 1.76rem;
  height: 0.38rem;
  line-height: 0.38rem;
  float: right;
  font-size: 0.16rem;
  font-weight: bold;
  border-radius: 0.1rem;
  box-shadow: 0 0 0.2rem 0 rgba(56, 133, 248, 0.2);
  padding-left: 0.68rem;
  color: #ffffff;
  cursor: pointer;
  background-color: #259b24;
  background-repeat: no-repeat;
  background-size: 0.18rem;
  background-position: 0.38rem center;
  background-image: url(../../assets/img/clue_manage/download.png);
}

.download_btn:hover {
  background-color: rgba(37, 155, 36, 0.8);
}

.upload_btn {
  width: 1.76rem;
  height: 0.38rem;
  line-height: 0.38rem;
  float: right;
  margin-left: 0.2rem;
  font-size: 0.16rem;
  font-weight: bold;
  border-radius: 0.1rem;
  box-shadow: 0 0 0.2rem 0 rgba(56, 133, 248, 0.2);
  padding-left: 0.68rem;
  color: #ffffff;
  cursor: pointer;
  background-color: #3885f8;
  background-repeat: no-repeat;
  background-size: 0.18rem;
  background-position: 0.38rem center;
  background-image: url(../../assets/img/clue_manage/export.png);
}

.upload_btn:hover {
  background-color: rgba(56, 133, 248, 0.8);
}
</style>